<template>
  <div class="ques-detail">
    <div class="detail-title">
      <div>题目：</div>
      <div class="text">{{ qTitle }}</div>
      <div class="sort" v-if="sort == '单'">[单选题]</div>
      <div class="sort" v-else-if="sort == '多'">[多选题]</div>
      <div class="sort" v-else>[填空题]</div>
    </div>
    <div class="detail-table">
      <TableListTian
        v-if="sort == '填'"
        key="22"
        :toTableData="tableDataT"
        :tableHeader="tableHeader"
        :deleteEdit="deleteEdit"
      ></TableListTian>

      <el-table
        border
        :data="showData"
        v-else
        key="33"
        show-summary
        :summary-method="getSummaries"
        style="width: 100%"
      >
        <el-table-column prop="pickText" label="选项" width="180" key="10">
        </el-table-column>

        <el-table-column
          type="index"
          :index="indexMethod"
          width="75"
          sortable
          label="人数"
          key="20"
        >
        </el-table-column>

        <el-table-column label="比例" key="30">
          <template slot-scope="scope">
            <!-- {{ scope.row.pick }} -->
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="
                progressArr.filter((s) => s.pick == scope.row.pick)[0].progress
              "
              status="success"
            ></el-progress>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="detail-btn">
      <el-button-group>
        <el-button @click="upTi" type="primary" icon="el-icon-arrow-left"
          >上一题</el-button
        >
        <el-button @click="nextTi" type="primary"
          >下一题<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
import TableListTian from "../../components/common/TableListTian.vue";
export default {
  data() {
    return {
      tableData: [],
      showData: [],
      // te: [1, 2, 3, 4],
      optionOneNumArr: [0], //每一选项的人数
      qId: this.q_id,
      qTitle: "",
      sort: "",
      showDataNum: 0, //数组标
      peopleNum: "", //总答题人数
      optionId: "",
      progressArr: [{ pick: "A", progress: 30 }], //计算比例
      tableHeader: [{ prop: "choice_con", label: "回答内容" }],
      tableDataT: [], //传递给子组件数据
      deleteEdit: {
        options: 0,
        delete: 0,
        edit: 0,
      },

      // people
    };
  },
  components: {
    TableListTian,
  },
  props: {
    q_id: String,
  },
  watch: {
    q_id(newVal) {
      this.qId = newVal; //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
      console.log(this.qId);
      // console.log(this.tableData);
      this.requestData();
      this.peopleNums();
      // this.dataShow(this.upPageSize);
    },
  },
  created() {
    this.requestData();
    this.peopleNums();
  },
  methods: {
    requestData() {
      // console.log("555");
      // console.log(this.qId);
      //单选多选，填空，请求题目详情
      return new Promise((resove, reject) => {
        this.$request({
          url: "/ques_con_list_one",
          method: "POST",
          data: {
            qId: this.qId,
          },
        })
          .then((res) => {
            // console.log(res.data.data);
            let options = JSON.parse(res.data.data[0].options);

            this.tableData = options;
            // this.tableDataT = options.filter((s) => s.sort == "填");
            console.log(this.tableData);
            this.showData = this.tableData[0].optionOne;
            this.qTitle = this.tableData[0].title;
            this.optionId = this.tableData[0].option_id;
            this.sort = this.tableData[0].sort;
            // console.log(this.tableData.title);
            console.log("所有选项信息：");
            console.log(options);

            this.optionOneNum();
            resove();
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    requestDataTian() {},
    //人数计算,百分比计算
    peopleNums() {
      this.progressArr = [];
      //所有人数
      this.peopleNum = this.optionOneNumArr.reduce((val1, val2) => {
        return val1 + val2;
      });
      // console.log(this.showData.length);
      for (let i = 0; i < this.showData.length; i++) {
        //ABCD累加
        let option = String.fromCharCode("A".charCodeAt(0) + i);
        let progressNum = Math.floor(
          (this.optionOneNumArr[i] / this.peopleNum) * 100
        );
        if (!progressNum) {
          progressNum = 0;
        }
        // console.log(option);
        // console.log(progressNum);
        // console.log(option);
        this.progressArr.push({ pick: option, progress: progressNum });
      }
      // console.log(this.progressArr);
    },

    nextTi() {
      if (this.showDataNum < this.tableData.length - 1) {
        this.showDataNum += 1;
        console.log(this.showDataNum);
        this.showData = this.tableData[this.showDataNum].optionOne;
        this.qTitle = this.tableData[this.showDataNum].title;
        this.optionId = this.tableData[this.showDataNum].option_id;
        this.sort = this.tableData[this.showDataNum].sort;
        this.optionOneNum();
        // console.log(this.tableData[this.showDataNum].option_id); //获取了option_id
      }
    },
    upTi() {
      if (this.showDataNum > 0) {
        this.showDataNum -= 1;
        console.log(this.showDataNum);
        this.showData = this.tableData[this.showDataNum].optionOne;
        this.qTitle = this.tableData[this.showDataNum].title;
        this.optionId = this.tableData[this.showDataNum].option_id;
        this.sort = this.tableData[this.showDataNum].sort;
        this.optionOneNum();

        // console.log(this.tableData[this.showDataNum].option_id);
      }
    },
    // 计算，自动义第二列，人数
    indexMethod(index) {
      return this.optionOneNumArr[index];
    },
    //自动以最后一行
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 1) {
          sums[index] = this.peopleNum;
          return;
        }
      });

      return sums;
    },
    //单个选型的选择数量，根据此时的optionId，查询数据库
    optionOneNum() {
      this.optionOneNumArr = [];
      this.$request({
        url: "/ques_people_one",
        method: "POST",
        data: {
          optionId: this.optionId,
        },
      }).then((res) => {
        // console.log(res.data);
        let choiceData = res.data.data;

        console.log(choiceData);
        let choiceDataDan = choiceData.filter((s) => s.sort == "单");
        let choiceDataDuo = choiceData.filter((s) => s.sort == "多");
        let choiceDataTian = choiceData.filter((s) => s.sort == "填");
        this.tableDataT = choiceDataTian;
        //多选
        if (choiceDataDuo.length > 0) {
          console.log("多");
          //没人获取选项，组成数组
          choiceData = choiceDataDuo.map((s) => {
            s.choice_con = JSON.parse(s.choice_con);
            return s.choice_con;
          });
          //合并数组，数组为单个选项
          let arr = [];
          for (let i in choiceData) {
            // let arr = [];
            arr.push(...choiceData[i]);
          }
          choiceData = arr;
          console.log(choiceData);
          let choice_A = choiceData.filter((s) => {
            return s == "A";
          });
          let choice_B = choiceData.filter((s) => {
            return s == "B";
          });
          let choice_C = choiceData.filter((s) => {
            return s == "C";
          });
          let choice_D = choiceData.filter((s) => {
            return s == "D";
          });
          let choice_E = choiceData.filter((s) => {
            return s == "E";
          });
          let choice_F = choiceData.filter((s) => {
            return s == "F";
          });

          this.optionOneNumArr.push(
            choice_A.length,
            choice_B.length,
            choice_C.length,
            choice_D.length,
            choice_E.length,
            choice_F.length
          );
          this.peopleNums();
        }
        //单选
        if (choiceDataDan.length > 0) {
          console.log("单");
          choiceData = choiceDataDan;
          let choice_A = choiceData.filter((s) => {
            return s.choice_con == "A";
          });
          let choice_B = choiceData.filter((s) => {
            return s.choice_con == "B";
          });
          let choice_C = choiceData.filter((s) => {
            return s.choice_con == "C";
          });
          let choice_D = choiceData.filter((s) => {
            return s.choice_con == "D";
          });
          let choice_E = choiceData.filter((s) => {
            return s.choice_con == "E";
          });
          let choice_F = choiceData.filter((s) => {
            return s.choice_con == "F";
          });

          this.optionOneNumArr.push(
            choice_A.length,
            choice_B.length,
            choice_C.length,
            choice_D.length,
            choice_E.length,
            choice_F.length
          );
          this.peopleNums();
        }
        // console.log(choiceDataDan);
        // console.log(choiceDataDuo);
        // conchoiceDataDuo
        // if (choiceData.sort == "单") {
        //   let choice_A = choiceData.filter((s) => {
        //     return s.choice_con == "A";
        //   });
        //   let choice_B = choiceData.filter((s) => {
        //     return s.choice_con == "B";
        //   });
        //   let choice_C = choiceData.filter((s) => {
        //     return s.choice_con == "C";
        //   });
        //   let choice_D = choiceData.filter((s) => {
        //     return s.choice_con == "D";
        //   });
        //   let choice_E = choiceData.filter((s) => {
        //     return s.choice_con == "E";
        //   });
        //   let choice_F = choiceData.filter((s) => {
        //     return s.choice_con == "F";
        //   });

        //   this.optionOneNumArr.push(
        //     choice_A.length,
        //     choice_B.length,
        //     choice_C.length,
        //     choice_D.length,
        //     choice_E.length,
        //     choice_F.length
        //   );
        //   this.peopleNums();
        // }

        // console.log(this.optionOneNumArr);
      });
    },
    // //选择该题的总人数，直接openid的数量，router.get("/qte",没用
    // optionPeopleNum() {},
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.ques-detail {
  background-color: #fff;
  padding-left: 20px;
  padding-right: 20px;
  // box-sizing: border-box;

  .detail-title {
    display: flex;
    font-size: 18px;
    align-items: center;
    .text {
      // padding-left: 10px;
      font-size: 15px;
      color: #333;
    }
    .sort {
      padding-left: 10px;
      font-size: 15px;
      color: #777;
    }
  }
  .detail-table {
    margin-top: 10px;
  }
  .detail-btn {
    margin-top: 10px;
    @include center;
  }
}
</style>
